import { fileURLToPath } from 'url'
import { createHtmlPlugin } from 'vite-plugin-html'

import { defineConfig, loadEnv } from 'vite'
import type { ConfigEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from 'vite-plugin-compression'
import UnoCSS from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  // 环境变量
  const env = loadEnv(mode, process.cwd())

  return {
    plugins: [
      vue(),
      createHtmlPlugin({
        // 往index.html注入数据
        inject: {
          data: {
            // 标题
            title: env.VITE_APP_NAME
          }
        }
      }),
      AutoImport({
        imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
        eslintrc: {
          enabled: false, // Default `false`
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
        dts: './auto-import.d.ts',
        resolvers: [
          ElementPlusResolver({
            // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
            importStyle: 'sass'
          })
        ]
      }),
      Components({
        extensions: ['vue'],
        include: [/\.vue$/, /\.vue\?vue/],
        deep: true,
        directoryAsNamespace: true,
        // imports 指定组件所在位置，默认为 src/components; 有需要也可以加上 view 目录
        dirs: ['src/components/', 'src/views/', 'src/container/', 'src/layout/'],
        dts: './components.d.ts',
        resolvers: [
          ElementPlusResolver({
            // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
            importStyle: 'sass'
          })
        ]
      }),
      viteCompression(),
      UnoCSS()
    ],
    base: './',
    resolve: {
      alias: {
        // 别名
        '@': fileURLToPath(new URL('src', import.meta.url)),
        '@image': fileURLToPath(new URL('src/assets/image', import.meta.url))
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/css/theme/light.scss" as *;'
        }
      }
    },
    server: {
      host: '0.0.0.0', // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
      port: 8090, //默认端口号
      open: true, //是否打开
      hmr: true, //热更新
      cors: true,
      proxy: {
        // 本地代理到远程后端服务
        '/ncc': {
          target: 'http://192.168.118.41:9195',
          // target: 'http://192.168.52.26:100', // 生产环境
          changeOrigin: true
        },
        '/oss': {
          target: 'http://192.168.118.41:9195',
          // target: 'http://192.168.52.26:100', // 生产环境
          changeOrigin: true
        }
      }
    },
    build: {
      // 非生产环境启用SourceMap
      // sourcemap: mode !== 'production',
      rollupOptions: {
        // 构建输出目录修改
        output: {
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: 'assets/css/[name]-[hash].[ext]'
        }
      }
    }
  }
})
